<template>
    <div class='container'>
        <!-- 页面头部 -->
        <page-header title="投票中心" @heightChange="handleHeaderHeightChange" />

        <!-- 功能介绍区 -->
        <view class="intro-box">
            <view class="intro-title">
                <uni-icons type="medal" size="24" color="#007AFF"></uni-icons>
                <text>投票功能</text>
            </view>
            <view class="intro-content">
                <text class="intro-text">在这里，您可以参与各类投票活动，表达您的观点和选择。我们提供公平、公正、公开的投票环境，让每一次投票都充满意义。</text>
            </view>
            <view class="intro-features">
                <view class="feature-item">
                    <uni-icons type="checkmarkempty" size="20" color="#4cd964"></uni-icons>
                    <text>公平公正</text>
                </view>
                <view class="feature-item">
                    <uni-icons type="checkmarkempty" size="20" color="#4cd964"></uni-icons>
                    <text>实时统计</text>
                </view>
                <view class="feature-item">
                    <uni-icons type="checkmarkempty" size="20" color="#4cd964"></uni-icons>
                    <text>结果透明</text>
                </view>
            </view>
        </view>

        <!-- 统计数据区 -->
        <view class="stats-box">
            <view class="stats-title">
                <uni-icons type="chart" size="24" color="#007AFF"></uni-icons>
                <text>投票统计</text>
            </view>
            <view class="stats-grid">
                <view class="stats-item" v-for="(item, index) in statsData" :key="index">
                    <text class="stats-num">{{ item.value }}</text>
                    <text class="stats-label">{{ item.label }}</text>
                </view>
            </view>
        </view>

        <!-- 推荐活动区 -->
        <view class="activities-box">
            <view class="activities-header">
                <view class="activities-title">
                    <uni-icons type="star" size="24" color="#007AFF"></uni-icons>
                    <text>推荐活动</text>
                </view>
                <view class="more-link" @click="handleMoreClick">
                    <text>查看更多</text>
                    <uni-icons type="right" size="16" color="#666"></uni-icons>
                </view>
            </view>
            <view class="activities-list">
                <view class="activity-item" v-for="(item, index) in activityList" :key="index"
                    @click="handleActivityClick(item)">
                    <view class="activity-info">
                        <text class="activity-title">{{ item.title }}</text>
                        <text class="activity-desc">{{ item.description }}</text>
                        <view class="activity-meta">
                            <view class="meta-item">
                                <uni-icons type="person" size="14" color="#666"></uni-icons>
                                <text>{{ item.participants }}人参与</text>
                            </view>
                            <view class="meta-item">
                                <uni-icons type="calendar" size="14" color="#666"></uni-icons>
                                <text>{{ item.endTime }}截止</text>
                            </view>
                        </view>
                    </view>
                    <view class="activity-status" :class="item.status">
                        <text>{{ item.statusText }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 加载框 -->
        <uni-popup ref="loadingPopup" type="center" :mask-click="false" @change="onPopupChange">
            <view class="loading-content">
                <image class="loading-image" src="/static/logo.png" mode="aspectFit" />
                <text class="loading-text">{{ loadingText }}</text>
            </view>
        </uni-popup>
    </div>
</template>

<script>
// 结构
import {
    defineComponent,
    onMounted,
    ref,
    watch,
    reactive
} from 'vue';
import { onPullDownRefresh } from '@dcloudio/uni-app';
// 模块化
import PageHeader from '@/components/PageHeader.vue';
import { storage } from '@/library/storage.js';

export default defineComponent({
    name: 'VoteIndex', // 组件名称
    props: {
        // 接收父组件数据

    },
    components: {
        PageHeader,
    },
    // 主要是组件内交互事件
    setup(props, ctx) {
        // 这里没有this,直接使用props里数据
        // 进行数据的定义和初始化。object style interactive
        onMounted(() => { });

        // ===== 响应式对象 =====
        // 加载相关
        const loadingText = ref('加载中...');
        const loadingPopup = ref(null);
        const isPopupVisible = ref(false);

        // 统计数据
        const statsData = ref([
            { label: '投票活动', value: '128', icon: 'medal' },
            { label: '参与人数', value: '3,562', icon: 'person' },
            { label: '投票人次', value: '12,845', icon: 'checkbox' },
            { label: '总票数', value: '45,678', icon: 'star' }
        ]);

        // 头部高度
        const headerHeight = ref(64); // 默认头部高度（状态栏20px + 导航栏44px）

        // 底部安全区高度
        const bottomSafeHeight = ref(0); // 底部安全区高度

        // 活动列表数据
        const activityList = ref([
            {
                id: 1,
                title: '2024年度最佳员工评选',
                description: '评选年度表现最优秀的员工，表彰先进，激励团队',
                participants: 256,
                endTime: '2024-03-31',
                status: 'ongoing',
                statusText: '进行中'
            },
            {
                id: 2,
                title: '新产品功能投票',
                description: '为我们的新产品功能提出您的建议和想法',
                participants: 189,
                endTime: '2024-03-25',
                status: 'ongoing',
                statusText: '进行中'
            },
            {
                id: 3,
                title: '年度团建活动方案',
                description: '选择您最期待的团建活动方案',
                participants: 312,
                endTime: '2024-03-20',
                status: 'ending',
                statusText: '即将截止'
            }
        ]);

        // ===== 方法函数 =====
        // 处理查看更多点击
        const handleMoreClick = () => {
            uni.navigateTo({
                url: '/pages-vote/vote/VoteList',
                animationType: 'slide-in-right',
                animationDuration: 300
            });
        };

        // 处理活动点击
        const handleActivityClick = (item) => {
            uni.navigateTo({
                url: `/pages-vote/vote/VoteDetail?id=${item.id}`
            });
        };

        // 处理底部导航点击
        const handleTabClick = (item) => {
            console.log('切换到:', item.path);
        };

        // 处理头部高度变化
        const handleHeaderHeightChange = (heightInfo) => {
            headerHeight.value = heightInfo.totalHeaderHeight;
            console.log('头部高度变化:', heightInfo);
        };

        // 监听popup状态变化
        const onPopupChange = (e) => {
            console.log('popup状态变化:', e);
            console.log('是否显示:', e.show);
            isPopupVisible.value = e.show;
        };

        // ===== 生命周期钩子 =====
        onMounted(() => {
            // 初始化底部安全区高度
            initBottomSafeHeight();
            // 可以在这里加载实际数据
            loadVoteData();
        });

        // 初始化底部安全区高度
        const initBottomSafeHeight = () => {
            const deviceInfo = storage.getDeviceInfo();
            // 有的手机底部安全区高度为0，所以这里设置为10
            bottomSafeHeight.value = deviceInfo?.ui?.bottomSafeHeight || 10;
            console.log('底部安全区高度:', bottomSafeHeight.value);
        };

        // 加载投票数据
        const loadVoteData = async () => {
            loadingText.value = '加载投票数据...';
            // 显示loading弹窗
            loadingPopup.value.open();
            console.log('加载投票数据.loadingPopup', loadingPopup.value);

            try {
                // 模拟加载延迟
                setTimeout(() => {
                    // 这里应该调用后端接口获取数据
                    loadingPopup.value.close();
                }, 500);
            } catch (error) {
                console.error('加载投票数据失败:', error);
                uni.showToast({
                    title: '加载数据失败',
                    icon: 'none'
                });
                loadingPopup.value.close();
            }
        };
        onPullDownRefresh(() => {
            uni.stopPullDownRefresh();
        });
        // ===== 返回数据和方法 =====
        return {
            // 响应式对象
            loadingText,
            loadingPopup,
            isPopupVisible,
            headerHeight,
            bottomSafeHeight,
            statsData,
            activityList,

            // 方法函数
            handleMoreClick,
            handleActivityClick,
            handleTabClick,
            handleHeaderHeightChange,
            onPopupChange,
            loadVoteData
        };
    },
    // 组件之间交互事件
    methods: {

    },
    // 生命周期 - 创建完成（访问DOM元素）
    beforeCreate() {

    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问当前this实例）
    mounted() {

    },
    // 生命周期 - 更新之前（访问当前this实例）
    beforeUpdate() {

    },
    // 生命周期 - 更新之前（访问当前this实例）
    updated() {

    },
    // 生命周期 - 销毁之前（访问当前this实例）
    unmounted() {

    },
    // 生命周期 - 组件激活（访问当前this实例）
    activated() {

    },
    // 生命周期 - 组件停用（访问当前this实例）
    deactivated() {

    },
    // 生命周期 - 子孙组件错误时
    errorCaptured() {

    }
});
</script>
<style lang='less'>
/* 页面根容器样式 */
.container {
    width: 100%;
    min-height: calc(100vh - v-bind('headerHeight + "px"') - v-bind('bottomSafeHeight + "px"'));
    background-color: #f5f5f5;
    padding-top: v-bind('headerHeight + "px"');
    padding-bottom: v-bind('bottomSafeHeight + "px"');
    /* 底部安全区高度 */


    // 功能介绍区
    .intro-box {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .intro-title {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            text {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-left: 12rpx;
            }
        }

        .intro-content {
            margin-bottom: 20rpx;

            .intro-text {
                font-size: 28rpx;
                color: #666;
                line-height: 1.6;
            }
        }

        .intro-features {
            display: flex;
            flex-wrap: wrap;
            gap: 20rpx;

            .feature-item {
                display: flex;
                align-items: center;
                background-color: #f8f8f8;
                padding: 12rpx 24rpx;
                border-radius: 30rpx;

                text {
                    font-size: 26rpx;
                    color: #666;
                    margin-left: 8rpx;
                }
            }
        }
    }

    // 统计数据区
    .stats-box {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .stats-title {
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;

            text {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-left: 12rpx;
            }
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20rpx;

            .stats-item {
                background-color: #f8f8f8;
                padding: 30rpx;
                border-radius: 12rpx;
                text-align: center;

                .stats-num {
                    display: block;
                    font-size: 40rpx;
                    font-weight: bold;
                    color: #007AFF;
                    margin-bottom: 10rpx;
                }

                .stats-label {
                    font-size: 26rpx;
                    color: #666;
                }
            }
        }
    }

    // 推荐活动区
    .activities-box {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .activities-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;

            .activities-title {
                display: flex;
                align-items: center;

                text {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    margin-left: 12rpx;
                }
            }

            .more-link {
                display: flex;
                align-items: center;

                text {
                    font-size: 26rpx;
                    color: #666;
                    margin-right: 8rpx;
                }
            }
        }

        .activities-list {
            .activity-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20rpx 0;
                border-bottom: 1rpx solid #f2f2f2;

                &:last-child {
                    border-bottom: none;
                }

                .activity-info {
                    flex: 1;
                    margin-right: 20rpx;

                    .activity-title {
                        font-size: 30rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 10rpx;
                    }

                    .activity-desc {
                        font-size: 26rpx;
                        color: #666;
                        margin-bottom: 16rpx;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }

                    .activity-meta {
                        display: flex;
                        gap: 20rpx;

                        .meta-item {
                            display: flex;
                            align-items: center;

                            text {
                                font-size: 24rpx;
                                color: #666;
                                margin-left: 6rpx;
                            }
                        }
                    }
                }

                .activity-status {
                    padding: 8rpx 20rpx;
                    border-radius: 30rpx;
                    font-size: 24rpx;

                    &.ongoing {
                        background-color: #e6f7ff;
                        color: #007AFF;
                    }

                    &.ending {
                        background-color: #fff7e6;
                        color: #ff9500;
                    }

                    &.ended {
                        background-color: #f5f5f5;
                        color: #999;
                    }
                }
            }
        }
    }

    // 加载框样式
    .loading-content {
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 16rpx;
        padding: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 200rpx;

        .loading-image {
            width: 100rpx;
            height: 100rpx;
            margin-bottom: 20rpx;
            animation: rotate 1s linear infinite;
        }

        .loading-text {
            color: #ffffff;
            font-size: 28rpx;
            text-align: center;
        }
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}
</style>